import React from "react";
import { 
  FormControl, 
  Button, 
  Flex, 
  Select, 
  FormHelperText, 
  Input, 
  InputGroup, 
  InputLeftAddon, 
  InputRightAddon, 
  Radio, 
  RadioGroup, 
  Stack, 
  Switch, 
  FormLabel } from '@chakra-ui/core'
// 引入 react 图标模块
import { FaUserAlt, FaLock, FaCheck } from 'react-icons/fa'

export default function SignUp () {
  return <form>
    {/* Stack 布局组件 内部元素会以同样的间距相隔  spacing 间距 */}
    <Stack spacing="2">
      {/* 为文本框添加动态效果  isDisabled 禁用  isInvalid 文本未通过时红色边框 */}
      <FormControl isDisabled isInvalid>
        {/* input 为文本框组件分组 */}
        <InputGroup>
          {/* input 组件左边添加内容  可以是文本或图片 */}
          <InputLeftAddon children={<FaUserAlt />} />
          <Input placeholder="请输入用户名" />
        </InputGroup>
        {/* 文本框底部显示提示 */}
        <FormHelperText>用户名是必填项</FormHelperText>
      </FormControl>
      <InputGroup>
        <InputLeftAddon children={<FaLock />} />
        <Input placeholder="请输入密码" type="password" />
        <InputRightAddon children={<FaCheck />} />
      </InputGroup>
      {/* Radio 分组  defaultValue 默认选中的数据 */}
      <RadioGroup defaultValue="0">
        {/* direction：horizontal 横向保持间距 */}
        <Stack direction="horizontal" spacing="4">
          <Radio value="0">男</Radio>
          <Radio value="1">女</Radio>
        </Stack>
      </RadioGroup>
      {/* 选择框组件 appearance 取消原始下拉框 */}
      <Select appearance="none" placeholder="请选择学科">
        <option value="Java">Java</option>
        <option value="前端">前端</option>
      </Select>
      {/* 弹性组件  默认横向排列 */}
      <Flex>
        <Switch id="deal" mr="3"/>
        {/* label 标签  点击触发对应 id */}
        <FormLabel htmlFor="deal">是否同意协议</FormLabel>
      </Flex>
      {/* colorScheme 配色方案 */}
      <Button colorScheme="teal" w="100%" _hover={{bgColor: 'tomato'}}>注册</Button>
    </Stack>
  </form>
}